<template>
  <div class="baseinfo">
    <div class="flex-card">
      <div class="card-link review">
        <div class="rate">
          <span class="rate-num">{{ baseInfo.score }}</span>
          分
          <span>{{ baseInfo.rate }}</span>
        </div>
        <div class="sub-title">
          <span>{{ baseInfo.commentsNum }}</span>条评论
          <span>&nbsp;</span>
          <span>{{ baseInfo.guidelineNum }}</span>条攻略
        </div>
        <div class="iconfont goto-link">&#xe62d;</div>
      </div>
      <div class="card-link intro border-left">
        <div>景点简介</div>
        <div class="sub-title">开放时间、贴士</div>
        <div class="iconfont goto-link">&#xe62d;</div>
      </div>
    </div>
    <div class="addr border-top">
      <span class="iconfont">&#xe63f;</span>
      <span>{{ baseInfo.address }}</span>
      <span class="iconfont goto-link">&#xe62d;</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DetailBaseInfo',
  props: {
    baseInfo: Object
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/variables.styl'
  .sub-title
    line-height .32rem
    padding-top .1rem
    font-size .24rem
    color $grayTextColor
  .goto-link
    color $grayTextColor
    font-size .24rem
  .baseinfo
    padding .1rem .2rem
    .flex-card
      display flex
      padding .1rem 0 .2rem 0
      .card-link
        position relative
        flex 1
        .goto-link
          position absolute
          right 0
          top 0
          bottom 0
          line-height .56rem
      .review
        .goto-link
          right .1rem
        .rate
          color $highlightTextColor
          .rate-num
            font-size .44rem
      .intro
        padding-left .2rem
    .addr
      position relative
      padding .2rem 0
      .goto-link
        position absolute
        right 0
        top 0
        bottom 0
        line-height .72rem
</style>
